<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-title" content="space">
    <title>报名/Entry</title>
    <meta name="keywords" content="imbeer,爱啤酒" />
    <meta name="description" content="imbeer,爱啤酒,精酿啤酒，精酿啤酒资讯，酒吧" />
    <link rel="stylesheet" type="text/css" href="../../css/index_bak.css">
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/dashi.css" rel="stylesheet"/>
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
    <style>
        .baomingbiao input{
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
        .baomingbiao select{
             width:100%;
             height: 40px;
             line-height: 20px;
            position: relative;
         }
        .baomingbiao-tu{
            right: 5%;
            font-size: 16px;
            content: '\e609';
            color: #666;
            font-weight: 400;
            top:45%;
            position: absolute;
        }
        #myform .inputw_div{
            position: relative;
        }
        .baomingbiao textarea{
            width: 100%;
            height: 100px;
            line-height: 20px;
        }
        .baoming-tijiao{
            border-top: 1px solid #ccc;
             padding-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="qurentijiao">
    <div class="qurentijiao-bu"></div>
    <div class="qurentijiao-xinxi">
        <span class="qurentijiao-xinxi-top iconfont icon-duihao"></span>
        <span class="qurentijiao-xinxi-down">提交成功</span>
    </div>
</div>
<article class="mui-content baomingbiao">
    <div class="content">
        <div class="apply_cont">
            <form id="myform">
                <div class="fen_apply">
                    <h2>作品信息<span>/Beer information</span><em>*</em></h2>
                    <div class="input_div">
                        <h3>作品名称/<span>Beer name</span><span class="qingtianxie"></span></h3>
                        <input type="text" name="sign_name" class="required addText">
                    </div>
                    <div class="input_div inputw_div">
                        <h3>报名组别<span>/Entrance group</span><span class="qingtianxie"></span></h3>
                        <select id="selF" name="sign_group" class="required apply_bie">
                            <option value="0">选择组别</option>
                            <!--<option value="5">小麦（Wheat）</option>-->
                            <!--<option value="199">美式爱尔 (American ale)</option>-->
                            <!--<option value="191">美式IPA (American IPA)</option>-->
                            <!--<option value="194">美式烈性爱尔 (American strong ale)</option>-->
                            <!--<option value="89">世涛/波特 （Stout/porter）</option>-->
                            <!--<option value="203">特殊组 （Special)</option>-->
                            <!--<option value="173">英式爱尔 （English ale)</option>-->
                            <!--<option value="164">比利时爱尔 (Belgian ale)</option>-->
                        </select>
                        <span class="baomingbiao-tu iconfont icon-xiangxia"></span>
                    </div>
                    <div class="input_div inputw_div">
                        <h3>作品准确风格<span>/Accurate style</span><span class="qingtianxie"></span></h3>
                        <select id="selT" name="sign_style" class="required apply_bie fenggexuan">
                            <option value="0">选择风格</option>
                        </select>
                        <span class="baomingbiao-tu iconfont icon-xiangxia"></span>
                    </div>
                </div>
                <div class="fen_apply">
                    <h2>报名者信息<span>/Registration information</span><em>*</em></h2>
                    <div class="input_div">
                        <h3>姓名<span>/Name</span><span class="qingtianxie"></span></h3>
                        <input type="text" name="alone_name" value="" class="required addText">
                    </div>
                    <div class="input_div inputw_div">
                        <h3>姓别<span>/Gender</span><span class="qingtianxie"></span></h3>
                        <select name="sex" class="required " id="baosex">
                            <option value="1" >男/Male</option>
                            <option value="0" >女/Female</option>
                        </select>
                        <span class="baomingbiao-tu iconfont icon-xiangxia"></span>
                    </div>
                    <div class="input_div inputw_div">
                        <h3>所在地<span>/Location</span><span class="qingtianxie"></span></h3>
                        <select id="province" name="alone_zone" class="required ">
                            <option value=""></option>
                        </select>
                        <span class="baomingbiao-tu iconfont icon-xiangxia"></span>
                    </div>
                    <div class="input_div">
                        <h3>手机号<span>/Mobile number</span><span class="qingtianxie"></span></h3>
                        <input type="text" name="alone_phone" value="" class="required" id="phone">
                    </div>
                    <div class="input_div">
                        <h3>微信号<span>/WeChat number</span><span class="qingtianxie"></span></h3>
                        <input type="text" name="alone_weichat" value="" class="required addText">
                    </div>
                </div>
                <div class="fen_apply">
                    <h2>选填信息<span>/Optional information</span></h2>
                    <div class="input_div">
                        <h3>辅料/<span>Date packaged</span><span class="qingtianxie"></span></h3>
                        <textarea rows="5" name="fuliao" maxlength="100" class="required" placeholder=""></textarea>
                    </div>
                    <div class="input_div">
                        <h3>啤酒相关参数<span>/Beer related information</span><span class="qingtianxie"></span></h3>
                        <textarea rows="5" name="Beer_information" maxlength="100" class="required" placeholder=""></textarea>
                    </div>
                    <div class="input_div">
                        <h3>创作理念<span>/Creative idea</span><span class="qingtianxie"></span></h3>
                        <textarea rows="5" name="idea" maxlength="100" class="required" placeholder=""></textarea>
                    </div>
                    <div class="input_div baoming-tijiao">
                        <a class="saishidetai-tab-baom" id="saishi-baoming">提交/Submit</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</article>

<script type="text/javascript" src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/jquery.form.min.js"></script>
<script type="text/javascript" src="../../js/index_bak.js"></script>
<script type="text/javascript" src="../../js/tab.js"></script>
<script type="text/javascript">
    $(function(){
        var user =   getUserInfo();
        var user_token = user.user_token;
        $("textarea").blur(function(){
            var len = $(this).val().length;
            var $parent = $(this).siblings('h3').find('.qingtianxie');
            if(len > 10){
                var errorMsg = '书写内容请不要超过500字/You can only write 500 words';
                $parent.html('<span class="formtips onError">'+errorMsg+'</span>');
            }
    });

        var event = {
            getzubie: function () {
                var data = {
                    apiCode: '/DownList/groupList',
                };
                http(data, function (responed) {
                    var info = responed.data;
                    var temp = '';
                    $.each(info, function (i, n) {
                        temp += '<option value="'+ n.group_id+'" >'+ n.group_name+'</option>';
                    })
                    $('#selF').append(temp);
                    $('#selF').change(function(){
                        var classStr = 'pid'+$(this).val();
                        var arr = new Array();
                        $('.'+classStr).each(function(k,v) {
                            arr[k] = $(this).html();
                        });
                        $('#selT').empty().append(arr);
                        event.getstyle();
                    })
                });
            },

            getstyle: function () {
                var group_id = $('#selF').val();
                var data = {
                    apiCode: '/DownList/styleList',
                    group_id:group_id,
                };
                http(data, function (responed) {
                    var info = responed.data;
                    var temp = '';
                    $.each(info, function (i, n) {
                        temp += '<option value="'+ n.style_id+'" data-pid="'+ group_id+'">'+n.style_name+'</option>';

                    })
                    $('.fenggexuan').append(temp);
                });
            },
        }
        event.getzubie();
    });
    $('.required').bind('focus',function(){
        $('.footer_sub').css('position','static');
    }).bind('blur',function(){
        $('.footer_sub').css({'position':'fixed','bottom':'0'});
    });

    $('.xuan').bind('focus',function(){
        $('.footer_sub').css('position','static');
    }).bind('blur',function(){
        $('.footer_sub').css({'position':'fixed','bottom':'0'});
    });

</script>
</body>
</html>